<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">
    div
</div>

</body>
<script type="text/babel">
    // 1- react可以构建界面
    // 2- 界面需要借助数据
    //    插值表达式:可以指定字符串，数字。
    //        不可以指定函数，对象(虚拟DOM对象例外)
    //        数组会被直接展开：[1,2,3,4]------>1234
    //        true,false,undefined,null 不会进行任何的渲染
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let n = 1000;
    let str = "字符串";
    function fn(){

    }
    // jsx本质是虚拟DOM,jsx模板 `${}`
    root.render((
        <div>
            <p>{n}</p>
            <p>{n+100}</p>
            <p>{str}</p>
            <p>{[1,2,3,4]}</p>
            <p>{null}</p>
            <p>{undefined}</p>
            <p>{true}</p>
            <p>{false}</p>
            <p>{fn()}</p>
        </div>
    ));
</script>
</html>